@mixin toolbar-item($pos, $hoverPos){
    background-position: 0 $pos;
    &:hover{
        background-position: 0 $hoverPos;
    }
}
@import "mixin";
$toolbar-size: 52px;
.toolbar-item, .toolbar-layer{
    background-image: url('../img/toolbar.png');
    background-repeat: no-repeat;
}
.toolbar{
    position: fixed;
    left: 50%;
    bottom: 50px;
    margin-left: -$toolbar-size / 2;
}
.toolbar-item{
    position: relative;
    display: block;
    width: $toolbar-size;
    height: $toolbar-size;
    margin-top: 1px;
    @include transition(background-position 1s);
    &:hover{
        .toolbar-layer{
            @include opacity(1);
            @include scale(1);
        }
    }
}
.tool-item-weixin{
    @include toolbar-item(-798px, -860px);
    .toolbar-layer{
        height: 212px;
        background-position: 0 0;
    }
}
.tool-item-feedback{
    @include toolbar-item(-426px, -488px);
}
.tool-item-app{
    @include toolbar-item(-550px, -612px);
    .toolbar-layer{
        height: 194px;
        background-position: 0 -222px;
    }
}
.tool-item-top{
    @include toolbar-item(-674px,-736px);
}
.toolbar-layer{
    position: absolute;
    right: $toolbar-size - 6;
    bottom: -10px;
    width: 172px;
    @include opacity(0);
    @include transform-origin(95% 95%);
    @include scale(0.01);
    @include transition(all 1s);
}